import React from 'react';
import { Dropdown, Menu } from '@teamix/ui';
import { ButtonIcon } from '@alife/devops-ui';
import EditWebhooks from '../editWebhooks';
import DeleteConfirm from 'components/deleteConfirm';
import HistoryModal from '../historyModal';
import intl from '../../../../../../../../../../locale';

export default class TableAction extends React.Component {
  state = {
    isEditModalOpen: false,
    dropdownVisible: false,
    isHistoryModalOpen: false,
  };

  onMoreClick = () => {
    const { dropdownVisible } = this.state;
    this.setState({
      dropdownVisible: !dropdownVisible,
    });
  };

  render() {
    const { record } = this.props;
    const { isEditModalOpen, dropdownVisible, isHistoryModalOpen } = this.state;
    return (
      <div>
        <EditWebhooks
          isModalOpen={isEditModalOpen}
          id={record.id}
          onClose={() => {
            this.setState({
              isEditModalOpen: false,
            });
          }}
          {...this.props}
        />

        <Dropdown
          triggerType="click"
          align="tr br"
          visible={dropdownVisible}
          onVisibleChange={(visible, type) => {
            this.setState({
              dropdownVisible: type === 'fromContent' ? true : visible,
            });
          }}
          trigger={<ButtonIcon name="more-line" onClick={this.onMoreClick} />}
        >
          <Menu autoWidth>
            <Menu.Item
              onClick={() => {
                this.setState({ isEditModalOpen: true, dropdownVisible: false });
              }}
            >
              {intl.get({
                id: 'code-assets.containers.tableAction.Editing',
                defaultMessage: '编辑',
              })}
            </Menu.Item>
            <Menu.Item>
              <DeleteConfirm
                id={record.id}
                remove={this.props.remove}
                content=" Webhook"
                align="l"
                trigger={
                  <div>
                    {intl.get({
                      id: 'code-assets.containers.tableAction.Delete',
                      defaultMessage: '删除',
                    })}
                  </div>
                }
              />
            </Menu.Item>
          </Menu>
        </Dropdown>

        {isHistoryModalOpen && (
          <HistoryModal
            isModalOpen={isHistoryModalOpen}
            web_hook_id={record.id}
            closeModal={() => {
              this.setState({
                isHistoryModalOpen: false,
              });
            }}
          />
        )}
      </div>
    );
  }
}
